<template>
  <div class="content-container pheadmesg">
  	<m-Head v-if="!ok"></m-Head>
    <div class="page-option auto-center" v-if="pagedata">
      <div class="data-title">
        <span class="data-title-text">{{pagedata.name}}总人口</span>
      </div>
      <div class="data-title-content">
        <div class="data-option">
          <h2>{{pagedata.option}}</h2>
          <span class="data-int">万人</span>
        </div>
        <div class="data-icon">
          <div class="data-icon-wrapper">
            <img :src="pageicon">
          </div>
        </div>
      </div>
    </div>
    <div class="page-chart-wrapper" v-if="pagedata">
      <div class="peoaver-wrapper absolutenode" v-if="pagedata.AverIncome">
        <div class="peoaver-section" v-if="pagedata.AverIncome.urbanAverIncome">
          <p class="peoaver-title">城镇人均收入(元)</p>
          <p class="peoaver-int">{{pagedata.AverIncome.urbanAverIncome}}</p>
        </div>
        <div class="peoaver-section" v-if="pagedata.AverIncome.villageAverIncom">
          <p class="peoaver-title">农村人均收入(元)</p>
          <p class="peoaver-int">{{pagedata.AverIncome.villageAverIncom}}</p>
        </div>
      </div>
      <chart :option="chartoption" :id="'peochart'"></chart>
      <div class="peonum-wrapper absolutenode" v-if="pagedata.Num">
        <div class="peonum-section" v-if="pagedata.Num.townNum">
          <p class="peonum-title">行政村(个)</p>
          <p class="peonum-int">{{pagedata.Num.townNum}}</p>
        </div>
        <div class="peonum-section" v-if="pagedata.Num.villageNum">
          <p class="peonum-title">乡村(个)</p>
          <p class="peonum-int">{{pagedata.Num.villageNum}}</p>
        </div>
      </div>
    </div>
    <div class="page-description auto-center" v-if="desc">
      <p class="page-description-content">{{desc}}</p>
    </div>
  </div>
</template>

<script>
import pageicon from '@/assets/imgicon/peoicon.png'
import mHead from '@/components/head'
import axios from '@/assets/api/axios'
import chart from '@/components/chart'
import ChartoOption from '@/assets/api/chart' 
export default {
  name: 'populationinfo',
  props: {
    ok: Boolean
  },
  data: function () {
  	return {
  		//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
  		vuegConfig:{
  			disable:false
  		},
      pagedata: null,
      pageicon: pageicon,
      desc: null,
      chartoption: null
  	}
  },
  created: function () {
    this.getPeoData();
  },
  methods: {
    getPeoData () {
      let setting = {
        method: 'POST',
        url: '/Earthdata/getData'
      },
      data = {
        city: '定兴县',
        handel: 'peo'
      };
      axios((res) =>{
        if(res.stutas === 200) {
          let data = res.data[0];
          this.pagedata = this.setPeoData(data);
          this.desc = this.setDes(data);
          this.setOption();
        }
      }, {setting, data});
    },
    setPeoData (data) {
      return {
            option: data.POP_ALL,
            chart: {
              POP_COUNTRYSIDE: data.POP_COUNTRYSIDE,
              POP_TOWN: data.POP_TOWN,
              list: [data.POP_TOWN, data.POP_COUNTRYSIDE]
            },
            Num: {
              townNum: data.townNum,
              villageNum: data.villageNum
            },
            AverIncome: {
              urbanAverIncome: data.urbanAverIncome,
              villageAverIncom: data.villageAverIncom
            },
            name: data.eqtname
          };
    },
    setDes (data) {
      let staPercent = this.staPercent;
      let name = data.eqtname, all = data.POP_ALL, town = data.POP_TOWN, countryside = data.POP_COUNTRYSIDE, townpercent = staPercent(town, all), countrysidepercent = staPercent(countryside, all);
      return "据《中国2010年人口普查分县资料》，" + name + "在2010年的总人口约" + all + "万人。在总人口中，城镇人口约" + town + "万人，占总人口的" + townpercent + "%，农业人口约" + countryside + "万人，占总人口的" + countrysidepercent + "%。";
    },
    staPercent (child, parent) {
      return ((Number(child) / Number(parent)) * 100).toFixed(2);
    },
    setOption () {
      let data = this.pagedata.chart.list;
      let Chart = new ChartoOption('Pie', data, 'peochart');
      this.chartoption = Chart.getsoption();
    }
  },
  components: {
    mHead,
    chart
  }
}
</script>

<style>
  .absolutenode {
    position: absolute;
  }
  .absolutenode div {
    background-color: transparent;
  }
  .absolutenode p {
    margin: 0;
  }
  .peoaver-wrapper {
    width: 95%;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    justify-content: space-around;
  }
  p.peoaver-title {
    font-size: 13px;
    font-weight: 700;
    color: #424040;
  }
  p.peoaver-int {
    font-size: 15px;
    font-weight: 500;
    color: red;
  }
  .peonum-wrapper {
    width: 27%;
    left: 50%;
    background-color: transparent;
    display: flex;
    transform: translateX(-50%) translateY(-50%);
    justify-content: space-between;
    top: 50%;
  }
  p.peonum-title {
    font-size: 13px;
    font-weight: 700;
    color: #424040;
  }
  p.peonum-int {
    font-size: 15px;
    color: red;
  } 
  .pheadmesg::before {
    font-size: 24px;
    height: 22px;
    padding-top: 5px;
    line-height: 17px;
    font-weight: bold;
    text-align: center;
    content: '人口信息';
    position: absolute;
}
</style>